<route lang="jsonc" type="page">
{
"style": {
"navigationBarTitleText": "音乐放松",
"navigationBarBackgroundColor": "#4ecdc4",
"navigationBarTextStyle": "white"
}
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'MusicRelax',
})

// 音频管理器
const audioContext = uni.createInnerAudioContext()

// 舒缓音乐数据
const relaxingMusic = ref([
  {
    id: 1,
    title: '森林晨曲',
    artist: '自然之声',
    duration: '03:24',
    url: 'https://www.soundjay.com/misc/sounds-etc/bell-ringing-05.wav',
    cover: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300',
    category: '自然音乐',
    description: '清晨森林中的鸟鸣声，让人心旷神怡',
  },
  {
    id: 2,
    title: '海浪轻拍',
    artist: '海洋之声',
    duration: '05:12',
    url: 'https://www.soundjay.com/misc/sounds-etc/bell-ringing-05.wav',
    cover: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=300',
    category: '自然音乐',
    description: '温柔的海浪拍打海岸，带来宁静',
  },
  {
    id: 3,
    title: '雨夜静思',
    artist: '冥想音乐',
    duration: '04:36',
    url: 'https://www.soundjay.com/misc/sounds-etc/bell-ringing-05.wav',
    cover: 'https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?w=300',
    category: '冥想音乐',
    description: '雨滴敲打窗台，适合深度放松',
  },
  {
    id: 4,
    title: '钢琴夜曲',
    artist: '古典放松',
    duration: '06:18',
    url: 'https://www.soundjay.com/misc/sounds-etc/bell-ringing-05.wav',
    cover: 'https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?w=300',
    category: '古典音乐',
    description: '优美的钢琴曲，舒缓身心',
  },
  {
    id: 5,
    title: '禅意竹林',
    artist: '东方冥想',
    duration: '07:42',
    url: 'https://www.soundjay.com/misc/sounds-etc/bell-ringing-05.wav',
    cover: 'https://images.unsplash.com/photo-1544735716-392fe2489ffa?w=300',
    category: '冥想音乐',
    description: '竹林中的风声，充满禅意',
  },
])

// 播放状态
const currentPlaying = ref(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)

// 播放音乐
function playMusic(music: any) {
  if (currentPlaying.value?.id === music.id) {
    // 如果是同一首歌，切换播放状态
    if (isPlaying.value) {
      pauseMusic()
    }
    else {
      resumeMusic()
    }
  }
  else {
    // 播放新歌曲
    stopMusic()
    currentPlaying.value = music
    audioContext.src = music.url
    audioContext.play()
    isPlaying.value = true
  }
}

// 暂停音乐
function pauseMusic() {
  audioContext.pause()
  isPlaying.value = false
}

// 继续播放
function resumeMusic() {
  audioContext.play()
  isPlaying.value = true
}

// 停止音乐
function stopMusic() {
  audioContext.stop()
  isPlaying.value = false
  currentTime.value = 0
}

// 收藏音乐
function favoriteMusic(music: any) {
  uni.showToast({
    title: '已收藏',
    icon: 'success',
  })
}

// 分享音乐
function shareMusic(music: any) {
  uni.showShareMenu({
    withShareTicket: true,
    title: music.title,
    path: `/pages/relax/music/index?musicId=${music.id}`,
  })
}

// 音频事件监听
audioContext.onPlay(() => {
  isPlaying.value = true
})

audioContext.onPause(() => {
  isPlaying.value = false
})

audioContext.onEnded(() => {
  isPlaying.value = false
  currentTime.value = 0
})

audioContext.onTimeUpdate(() => {
  currentTime.value = audioContext.currentTime
  duration.value = audioContext.duration
})

onUnmounted(() => {
  audioContext.destroy()
})
</script>

<template>
  <view class="music-relax-container">
    <!-- 顶部说明 -->
    <view class="header-section">
      <view class="header-title">
        音乐放松
      </view>
      <view class="header-desc">
        聆听舒缓音乐，释放内心压力
      </view>
    </view>

    <!-- 当前播放 -->
    <view v-if="currentPlaying" class="now-playing">
      <view class="playing-cover">
        <image
          :src="currentPlaying.cover"
          mode="aspectFill"
          class="cover-image"
          :class="{ spinning: isPlaying }"
        />
        <view class="play-overlay" @click="playMusic(currentPlaying)">
          <view :class="isPlaying ? 'i-mdi-pause' : 'i-mdi-play'" class="play-icon" />
        </view>
      </view>
      <view class="playing-info">
        <view class="playing-title">
          {{ currentPlaying.title }}
        </view>
        <view class="playing-artist">
          {{ currentPlaying.artist }}
        </view>
        <view class="progress-container">
          <view class="progress-bar">
            <view
              class="progress-fill"
              :style="{ width: duration > 0 ? `${currentTime / duration * 100}%` : '0%' }"
            />
          </view>
          <view class="time-info">
            <text>{{ Math.floor(currentTime / 60) }}:{{ Math.floor(currentTime % 60).toString().padStart(2, '0') }}</text>
            <text>{{ currentPlaying.duration }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 音乐列表 -->
    <view class="music-list">
      <view class="list-header">
        <view class="list-title">
          推荐音乐
        </view>
      </view>

      <view
        v-for="music in relaxingMusic"
        :key="music.id"
        class="music-item"
        :class="{ active: currentPlaying?.id === music.id }"
      >
        <image
          :src="music.cover"
          mode="aspectFill"
          class="music-cover"
        />
        <view class="music-info">
          <view class="music-title">
            {{ music.title }}
          </view>
          <view class="music-artist">
            {{ music.artist }} · {{ music.category }}
          </view>
          <view class="music-desc">
            {{ music.description }}
          </view>
        </view>
        <view class="music-actions">
          <view class="action-duration">
            {{ music.duration }}
          </view>
          <view class="action-buttons">
            <view class="action-btn" @click="playMusic(music)">
              <view :class="currentPlaying?.id === music.id && isPlaying ? 'i-mdi-pause' : 'i-mdi-play'" />
            </view>
            <view class="action-btn" @click="favoriteMusic(music)">
              <view class="i-mdi-heart" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.music-relax-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #4ecdc4 0%, #44e6db 100%);
  padding-bottom: env(safe-area-inset-bottom);
}

// 顶部区域
.header-section {
  text-align: center;
  padding: 40rpx 30rpx;
  color: #fff;
}

.header-title {
  font-size: 44rpx;
  font-weight: 700;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.header-desc {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

// 当前播放区域
.now-playing {
  margin: 20rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

.playing-cover {
  width: 160rpx;
  height: 160rpx;
  margin-right: 30rpx;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  &.spinning {
    animation: rotate 3s linear infinite;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;

  &:active {
    opacity: 1;
  }
}

.play-icon {
  font-size: 48rpx;
  color: #fff;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playing-info {
  flex: 1;
}

.playing-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.playing-artist {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.progress-container {
  width: 100%;
}

.progress-bar {
  height: 6rpx;
  background: #f0f0f0;
  border-radius: 3rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.progress-fill {
  height: 100%;
  background: #4ecdc4;
  transition: width 0.2s ease;
}

.time-info {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999;
}

// 音乐列表
.music-list {
  margin: 20rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

.list-header {
  padding: 30rpx 40rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.list-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.music-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.2s ease;

  &:last-child {
    border-bottom: none;
  }

  &.active {
    background: #f0f8ff;
  }

  &:active {
    background: #f9f9f9;
  }
}

.music-cover {
  width: 100rpx;
  height: 100rpx;
  border-radius: 12rpx;
  margin-right: 30rpx;
}

.music-info {
  flex: 1;
  margin-right: 20rpx;
}

.music-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.music-artist {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.music-desc {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
}

.music-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.action-duration {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  font-size: 24rpx;
  transition: all 0.2s ease;

  view {
    width: 24rpx;
    height: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:active {
    transform: scale(0.95);
    background: #e9ecef;
  }
}
</style>
